import { useEffect,useState } from "react"
import { getGoodList } from "../../tools/Ajax"
import './listpage.css'
import { Link } from "react-router-dom"

// 首页所有商品列表
function Listpage(props){
    console.log(7,props.list)


    // 监听页面滚动
    // const handleOnScroll = ()=>{
    //     if(dom){
    //         const contentScrollTop = dom.scrollTop; //滚动条距离顶部
    //         const clientHeight = dom.clientHeight; //可视区域
    //         const scrollHeight = dom.scrollHeight; //滚动条内容的总高度
    //         if (contentScrollTop + clientHeight >= scrollHeight) {
    //             getLogPages();    // 获取数据的方法
    //             if(lists.length>0){
    //                 console.log(22,lists.length);
    //                 var sum = arrs.splice(0,100)
    //                 lists.push(...sum)
                    

    //             }
    //         }
    //     }
    // }


    return <div>
        <div className="bigboxs">
            <div className="big">
                {/* {props.list} */}
            {
                props.list.map((item,i)=>{
                    return (
                        <Link className="box" to={'/detail?id='+item.Id} key={i} >
                            <img className="imgs" src={item.imageUrl} alt="" />
                            <h4 className="h4">{item.title}</h4>
                            <div className="moneies">
                                <p className="money">￥{item.priceStr}</p>
                                <div className="ziti">
                                    <p className="p1">精选</p>
                                    <p className="p2">一起拼</p>
                                </div>
                            </div>
                        </Link>
                    )
                })
            } 
            </div>
        </div>

    </div>
}
export default Listpage